<extend name="desktop_default/template/base_index2" />

<block name="area_header">
	<style type="text/css">
		body {
			background-color: #F5F5F5;
			height: 1100px;
		}
		.top {
			
			height: 100px;
			background-color: #FFFFFF;
			border-bottom: 2px solid orangered;
		}
		.userinfo{margin-left: 65%; margin-top: -25px; font-size: 13px;}
		 a{ color: #000000;}
		 .order-info{ height: 150px;background-color: #FFFFFF; margin: 0 auto; width: 990px; padding: 30px;}
		 .fl{float: left; height: 100%; float: 60%; margin-left: 20px;}
		 .fr{float: right; height: 100%; width: 30%; }
		 .order-detail{background-color: #FFFFFF; margin: 0 auto; width: 990px; padding-left: 80px; padding-top: 20px; padding-bottom: 20px;}
		 .order-detail ul li{ list-style: none;}
		 .content{padding-left: 30px; padding-top: 5px; }
		 .paytype{margin-top: 20px; padding: 30px;background-color: #FFFFFF;margin: 0 auto; height: 500px; width: 65%;}
	</style>
</block>

<block name="area_body">
	<div class="top">
			<div style=" margin-left: 22%;">
				<br>
				<font size="5">支付订单</font>
			</div>
			<div class="userinfo">
				<a href="{:U('Shop/User/index')}"> 用户名：{$user['username']}&nbsp;</a>&nbsp;&nbsp;&nbsp;
				<a href="{:U('Shop/User/order')}">我的订单</a>
			</div>
		</div>
		<div class="order-info clearfix">
			<i class="am-icon-check-square-o" style="font-size: 53px; float: left; color: green;"></i>
			<div class="fl">
				
				<font size="5" class="title">您的订单已支付成功！48小时内发货</font>
				<p class="order-time"></p>
				<p class="post-info" id="J_postInfo">
					收货信息：{$orderinfo.contactname} {$orderinfo.mobile} &nbsp;&nbsp; {$orderinfo.province}&nbsp;&nbsp;{$orderinfo.city}&nbsp;&nbsp;{$orderinfo.area}&nbsp;&nbsp;{$orderinfo.detailinfo} </p>
			</div>
			<div class="fr">
				<p class="total">
					付款金额：<span class="money"><em style="color: orangered; font-size: 25px;">{$orderinfo.price}</em>元</span>
				</p>
				<a href="javascript:void(0);" class="show-detail" id="J_showDetail" >订单详情<i class="am-icon-chevron-down"></i></a>
			</div>
		</div>
		<div class="order-detail" style="display: none;" >
			<ul>
				<li class="clearfix">
					<div class="label">订单号：</div>
					<div class="content">
						<span class="order-num">
                           {$orderinfo.order_code}                                
						</span>
					</div>
				</li>
				<li class="clearfix">
					<div class="label">收货信息：</div>
					<div class="content">
						{$orderinfo.contactname} {$orderinfo.mobile} &nbsp;&nbsp; {$orderinfo.province}&nbsp;&nbsp;{$orderinfo.city}&nbsp;&nbsp;{$orderinfo.area}&nbsp;&nbsp;{$od.detailinfo}</div>
				</li>
				<li class="clearfix">
					<div class="label">商品名称：</div>
					<table>
					<volist name="orderitems" id="vo">
						<tr>
							<td><img style="" src="{:U('Api/Picture/index',array('id'=>$vo['img']))}" height="120" width="120"></td>
							<td>{$vo.name}</td>
						</tr>
					</volist>
						</table>
				</li>
				<li class="clearfix">
					<div class="label">配送时间：</div>
					<div class="content">
						不限送货时间 </div>
				</li>
				<li class="clearfix">
					<div class="label">发票信息：</div>
					<div class="content">
						个人 </div>
				</li>
			</ul>
		</div><br>
		<div style=" margin: 0 auto; background-color: #FFFFFF; width: 990px;">
			<button class="am-btn-danger goshop" style=" margin-top: 80px; width: 150px; height: 40px; font-size: 15px; margin-left: 30%; float: left;">继续购物</button>
			<button class="am-btn-default goorder" style="width: 150px; height: 40px; font-size: 15px; margin-left: 50%; margin-top: -70px;">查看订单</button>
		</div>
</block>

<block name="area_footer">
	<script type="text/javascript">
		$(function(){
			$('.order-detail').hide();
			$('#J_showDetail').click(function(){
				$('.order-detail').toggle(function(){
					
				})
			})
			$('.goorder').click(function(){
				window.location.href="{:U('Shop/User/order')}";
			})
			$('.goshop').click(function(){
				window.location.href="{:U('Shop/Index/sousuo')}";
			})
		})
	</script>
</block>
